<template>
    <!-- 头部导航栏中的个人信息对话框组件 -->
        <el-dialog title="账号信息:" :visible.sync="isDialogFormVisible" width="35%">
            <el-form :model="form" label-width="120px">
                <div class="detail-user">
                        <el-image 
                                :src="form.photo_url" 
                                :preview-src-list="srcList"
                                >
                        </el-image>

                        <el-upload
                            class="upload-demo"
                            :action="objData.host"
                            :data="objData"
                            :before-upload="getOSS"
                            :file-list="fileList"
                            :on-success="onSuccess"
                            list-type="picture">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                </div>

                <el-form-item label="用户名">
                        <el-input v-model="form.username" style="width: 85%;"></el-input>
                </el-form-item>
                <el-form-item label="新密码">
                        <el-input v-model="password1" style="width: 85%;"></el-input>
                </el-form-item>
                <el-form-item label="确认密码">
                        <el-input v-model="password2" style="width: 85%;"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                        <el-input v-model="form.sex" style="width: 85%;"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                        <el-input type="number" v-model="form.age" style="width: 85%;"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                        <el-input v-model="form.phone" style="width: 85%;"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                        <el-input v-model="form.address" style="width: 85%;"></el-input>
                </el-form-item>
                <el-form-item label="近期登录">
                        <el-input v-model="form.last_login_time" :disabled="true" style="width: 85%;"></el-input>
                </el-form-item>
                <el-form-item label="近期修改时间" v-if="form.update_time">
                        <el-input v-model="form.update_time" :disabled="true" style="width: 85%;"></el-input>
                </el-form-item>
                <el-form-item label="创建时间" v-if="form.create_time">
                        <el-input v-model="form.create_time" :disabled="true" style="width: 85%;"></el-input>
                </el-form-item>
                <el-form-item label="身份">
                        <el-input v-model="form.status" :disabled="true" style="width: 85%;"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible">取 消</el-button>
                <el-button type="primary" @click="updateInfo">修 改</el-button>
            </div>

    </el-dialog>
</template>

<script>
    import myAxios from "@/tools/myAxios";
    import Qs from 'qs';
    import axios from "axios";
    import {nanoid} from 'nanoid';
    axios.defaults.withCredentials = true;
    export default {
        name:'DialogBox',
        data() {
            return {
                // 当前登录用户的信息
                form:{},
                // 展示或隐藏对话框
                isDialogFormVisible:false,
                // 头像的预览
                fileList: [],
                // 图片上传后端签名数据
                objData:{
                    OSSAccessKeyId:'',
                    policy:'',
                    Signature:'',
                    key:'',
                    dir:'',
                    host:''
                },
                // 当前上传的头像的url
                pictureUrl:'',

                myUUID:'',       // uuid
                myData:'',       // images/当前时间/

                password1:'',   // 新密码
                password2:'',   // 确认新密码
            }
        },
        methods:{
            // 修改按钮
            updateInfo(){
                if(this.password1.trim() !== this.password2.trim()){
                    // 提示一下
                    this.$message({
                        message: '两次密码输入不一致!',
                        type: 'warning'
                    });
                    this.password1 = '';
                    this.password2 = '';
                }else{
                    if(this.pictureUrl === ''){
                        this.pictureUrl = this.form.photo_url;
                    }
                    const status = JSON.parse(sessionStorage.getItem('user')).status;
                    myAxios(
                        'http://localhost:8088/admin/updateadmininfo',
                        'post',
                        Qs.stringify({
                            id:this.form.id,
                            username:this.form.username,
                            sex:this.form.sex,
                            age:this.form.age,
                            phone:this.form.phone,
                            password:this.password1,
                            url:this.pictureUrl,
                            address:this.form.address,
                            status:status
                        }),
                        (data)=>{
                            sessionStorage.removeItem('user');
                            window.location.reload();
                            // 提示一下
                            this.$message({
                                message: '修改成功!',
                                type: 'success'
                            });
                        }
                    )
                }
            },
            // 拿到oss的服务端签名
            getOSS(file){
                let _this = this;
                return new Promise((resolve,reject)=>{
                    // 请求后端
                    axios({
                        url:'http://localhost:8088/oss/policy',
                        method:'get',
                        headers:{
                            Authorization: localStorage.getItem('token')
                        }
                    }).then(
                        response => {
                            _this.objData.OSSAccessKeyId = response.data.data.accessId;
                            _this.objData.policy = response.data.data.policy;
                            _this.objData.Signature = response.data.data.signature;
                            _this.objData.dir = response.data.data.dir;
                            _this.objData.host = response.data.data.host;                           // 直传oss地址
                            _this.myUUID = nanoid();      // uuid
                            _this.objData.key = response.data.data.dir+_this.myUUID+"${filename}";      // 文件名,使用nanoid生成唯一值
                            _this.myData = response.data.data.dir;     // images/时间/
                            resolve(true);   // 继续上传
                        },
                        error => {
                            console.log(error.message);
                            reject(false);   // 停止上传
                        }
                    )
                });
            },
            // 图片上传成功时调用
            onSuccess(response, file, fileList){
                if(fileList.length > 1){
                    fileList.shift();
                }
                this.pictureUrl = 'https://pension-system-wj.oss-cn-beijing.aliyuncs.com/'+this.myData+this.myUUID+file.name;
            },
            // 个人详情对话框(取消)
            dialogFormVisible(){
                // 关闭对话框
                this.isDialogFormVisible = false;
            },

            // 父组件触发对话框时的回调
            clickDialogVisible(data){
                this.form = data;
                this.pictureUrl = '';
                this.isDialogFormVisible = true;
            }
        },
        computed:{
            // 头像预览
            srcList(){
                return [this.form.photo_url]
            },
        },
        mounted(){
            // 绑定一个事件(触发对话框)
            this.$bus.$on('clickDialog',this.clickDialogVisible);
        },
        beforeDestroy(){
            // 解绑
            this.$bus.$off('clickDialog');
        }
    }
</script>

<style lang="less" scoped>
    .detail-user{
        display: flex;
        justify-content: space-between;
        align-items: center;

        .el-upload__tip,.el-upload-list--picture .el-upload-list__item {
            margin-top: 0px;
        }

        .el-image{
            width: 140px; 
            height: 140px;
            border-radius: 5px;
            margin-left: 15%;
            margin-bottom: 10px;
            margin-right: 5px;
        }

        .upload-demo{
            margin-right: 15%;
        }
    }
</style>